import React, { Component } from 'react'

// 引入immutable库
// immutable中提供2个重要的对象 List / Map
// List 类似于原生js中的 数组   数组  ==> List List转换它只会转换第1层
// Map  类似于原生js中的 对象   {}  ==> Map   Map转换它只会转换第1层
// fromJS 用于转换 把原生js对象转为对应的immutable对象
import { List, Map, fromJS } from 'immutable'

// --------------- Map
// 把原生的js对象转为Map对象
// let obj = { id: 1, name: '张三', info: { n: 1000 } }
// // Map转换，它只转换原生js对象的第1层，不太建议去使用
// // let state = Map(obj)
// // fromJS 它会自动深层转换
// let state = fromJS(obj)
// // console.log(obj)
// // console.log(state.get('info'))

// // 获取immutable对象中的数据  get/getIn
// console.log(state.get('name'))
// console.log(state.getIn(['name']))
// // 深层调用时，建议使用getIn
// console.log(state.get('info').get('n'))
// console.log(state.getIn(['info','n']));

// 修改 -- 修改后会返回一个新的immutable对象   set/setIn/update/updateIn
// let state = fromJS({ id: 1, name: '张三', info: { n: 1000 } })
// // 修改会返回一个新的immutable对象
// // let newState = state.set('name', '李四')
// // 多层级中修改数据时用 setIn
// // let newState = state.setIn(['info', 'n'], 2000)

// // 在原数据的基础上来修改数据 update/updateIn
// // let newState = state.update('id', v => v + 10)
// // 多层级中在原数据中去修改
// let newState = state.updateIn(['info', 'n'], v => v + 1000)
// // 把immutable对象转为原生js对象 immutable对象.toJS()
// console.log(newState.toJS())

// 删除 -- 返回一个新的immutable对象 remove/removeIn  -- 删除操作在工作中一般涉及不到
// let state = fromJS({ id: 1, name: '张三', info: { n: 1000, n2: 2000 } })
// // let newState = state.remove('id')
// let newState = state.removeIn(['info', 'n']).remove('id')
// console.log(newState.toJS())

// --------------- List
// fromJS自动转换对象的类型为immutable对象
// let state = fromJS([1, 2, { id: 1, name: '李四' }])

// // 获取 get / getIn
// // 方法中写数组的索引值
// console.log(state.get(1));  // 2
// console.log(state.getIn([2,'name']));

// push/unshift/pop/shift/splice/concat  和数组中的方法一样的  返回一个新的immutable
// let state = fromJS([1, 2, { id: 1, name: '李四' }])
// let newState = state.push(3)
// console.log(newState.toJS())

// 修改 返回一个新的immutable对象
// let state = fromJS([1, 2, { id: 1, name: '李四' }])
// // set/setIn/update/updateIn
// // let newState = state.set(0,10)
// // let newState = state.setIn([2,'id'],10)
// // 原数据上来修改
// let newState = state.updateIn([2, 'id'], v => v + 10)
// console.log(newState.toJS())


let state = fromJS([1, 2, { id: 1, name: '李四' }])
let newState = state.delete(0)

console.log(newState.toJS())

class App extends Component {
  render() {
    return (
      <div>
        <h3>App应用</h3>
      </div>
    )
  }
}

export default App
